<template>
  <section class="bg-white lg:pt-12 pt-8 lg:pb-40 pb-10">
    <div class="container mx-auto">
      <div
        class="
          flex
          lg:flex-row
          flex-col
          lg:justify-between
          items-center
          lg:items-center
        "
        :class="reverse ? 'flex-row-reverse' : ''"
      >
        <div class="lg:text-left text-center">
          <div class="font-semibold">
            <div class="text-gray-33 lg:text-5xl text-2xl">
              <slot name="title"></slot>
            </div>
            <div class="lg:py-6 py-3 text-gray-66 lg:text-2xl text-lg">
              <slot name="subtitle"></slot>
            </div>
          </div>
          <img
            class="
              lg:w-[540px] lg:mt-0
              mt-4
              w-full
              px-4
              object-contain
              lg:hidden
            "
            :src="imgSrc"
            alt=""
          />

          <div
            class="
              h-12
              lg:mt-[30px]
              mt-4
              flex
              items-center
              justify-center
              lg:justify-start
            "
          >
            <slot name="button"></slot>
          </div>
        </div>
        <img
          class="w-[540px] object-contain lg:block hidden"
          :src="imgSrc"
          alt=""
        />
      </div>
    </div>
  </section>
</template>
  
<script>
export default {
  props: ["img", "reverse"],
  data() {
    return {
      imgSrc: require("@/assets/img/" + this.img + ".png"),
    };
  },
};
</script>
  
<style>
</style>